<template>
    <div>
        <div class="home-layout-A">
            <div class="home-layout-A-left">
                <div class="home-title-A">
                    热门游戏
                    <a class="more" @click="hotService(gameListArr[0])">更多></a>
                </div>
                <div class="Popular-services">
                    <ul>
                        <li v-for="(item,index) in gameListArr" :key="index" @click="hotService(item)" @mouseover="item.isShowDescribe=true" @mouseout="item.isShowDescribe=false">
                            <a>
                                <img :src="$imgPath(item.homePage)">
                                <p>{{item.name}}</p>
                            </a>
                            <!-- 游戏介绍内容，需要后台添加字段 -->
                            <!-- <div class="gameDescribe" v-if="item.isShowDescribe==true">{{describeArr[index].content}}</div> -->
                        </li>
                    </ul>
                    
                </div>
            </div>
            <div class="home-layout-A-right">
                <div class="home-title-B">
                    一起玩过
                   <ul v-if="totalElements>3">
                       <li @click="fenYe(0)"><a class="left"></a></li>
                       <li @click="fenYe(1)"><a class="right"></a></li>
                   </ul>
                </div>
                <div class="played" v-if="isLog==true">
                    <ul>
                        <li v-for="(val,index) in sellerList" :key="index">
                            <img :src="$imgPath(val.seller.headImg)">
                            <!-- <a class="active">立即预约</a> -->
                            <a :class="[val.isSelect==true?'active':'']" @mouseover="val.isSelect=true" @mouseout="val.isSelect=false" @click="goDetail(val)">立即预约</a>
                        </li>                       
                    </ul>
                </div>
                <div class="played loginFalse" v-else>
                    <div class="top-img">
                        <img src="../../assets/img/login/mao.png" alt="">
                    </div>
                    <div class="login-y">Hi、老板好！</div>
                    <div class="bot-btn">
                        <p @click="goLogin()">登录</p>
                        <p @click="goLogin()">注册</p>            
                        <div class="myClear"></div>
                    </div>                    
                </div>
                <div class="home-title-B m-top-30">
                    最新公告
                    <router-link tag="a" :to="{path:'/gg/list'}" class="more">更多></router-link>
                </div>
                <div class="news clearfix">
                    <!-- <h2><a>逆水寒陪玩师招募活动开启！火速报名</a></h2> -->
                    <h2  @click="ggLink(AnnounCeMentTopData.length > 0 ? AnnounCeMentTopData[0] : '')"><a>{{AnnounCeMentTopData.length > 0 ? AnnounCeMentTopData[0].title : ''}}</a></h2>
                    <ul>
                      <li v-for="(item,index) in AnnounCeMentTopData" :key="index" @click="ggLink(item)">
                        <a>{{$points(item.title)}}<span>{{$time2(item.createTime)}}</span></a>
                      </li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- 实名注册 -->
        <!-- <Modal v-model="isShowNamereg" @on-cancel="isShowNamereg=false" :footer-hide="true" class-name="vertical-center-modal" width="268" height="232">
            <div class="nameReg">
                <h3>实名注册</h3>
                <span class="span1">
                    真实姓名：<input type="text" v-model="username">
                </span>
                <span class="span2">
                    身份证号：<input type="text" v-model="usercard">
                </span>
                <span class="span3" @click="namereg()">注册</span>                      
            </div>  
        </Modal> -->
    </div>
</template>
<script>
import apiHttp from '../../api/index'
export default {
    props:["isLog","islogin"],
    data() {
        return {
            isShowNamereg:false,
            username:'',
            usercard:'',
            describeArr:[
                {name:"绝地求生",content:"这是一款战术竞技型射击类沙盒游戏，玩家需要在游戏地图上收集各种资源，并在不断缩小的安全区域内对抗其他玩家，让自己生存到最后。"},
                {name:"荒野行动",content:"游戏讲述了远洋岛事件爆发之后，小岛遭到极端分子洗劫的故事。玩家可扮演男女任意性别的角色，加入到军事演习中，训练自己成为一名精英士兵。"},
                {name:"全军出击",content:"游戏结合了FPS和TPS等射击模式。以定点瞄准射击、躲避掩体为游戏的基础操作，还可以在战斗中使用道具、雇佣好友一起参战。"},
                {name:"英雄联盟",content:"游戏里拥有数百个个性英雄，并拥有排位系统、符文系统等特色养成系统形成了自己独有的电子竞技文化。"},
                {name:"王者荣耀",content:"游戏是类dota手游，游戏中的玩法以竞技对战为主，玩家之间进行1V1、3V3、5V5等多种方式的PVP对战，在满足条件后可以参加游戏排位赛等。"},
                {name:"刺激战场",content:"作为绝地求生正版手游，《绝地求生：刺激战场》还原了《绝地求生》端游的大部分大地图，建模和游戏场景，也还原端游的经典风格。"},
                {name:"逆水寒",content:"讲述北宋末年一段惨烈的大追捕，并牵扯出江湖恩、感情纠葛、市井百态等北宋生活画卷。"},
                {name:"小游戏",content:"囊括了各类益智小游戏，适合家长陪伴孩子一起开发智力，创造奇迹。"},
                {name:"聊天",content:"你有无法向亲朋好友诉说的心事或者难题吗？那就快来聊天室吧，这里可以让你尽情诉说，尽情发泄心中的苦闷。"},
                {name:"唱歌",content:"音乐永远是我们最好的陪伴，想听心中的那个声音吗？那就来吧。"},
                {name:"视频",content:"在网络世界里也有那么一种真实的存在，那就是视频，它可以拉近人与人之间的距离，让人们体验零距离的接触。"},
                {name:"叫醒",content:"你又早上不想起床的痛苦吗？每当这时候你是否也和我一样会期待一个温柔，甜美的声音在耳边响起叫醒不想起床的自己。"}               
            ],
            isShow:false,//是否显示实名注册
           // isFenYe:false,  //是否显示分页图标
            AnnounCeMentTopData:[],
            gameListArr:[],
            sellerList:[], //一起玩过的玩家列表
            page:0,
            size:3,
            totalElements:0, //一起玩过的玩家列表数据总条数
            totalPage:0  //一起玩过的玩家列表总页数
        }
    },
    //页面加载
    mounted(){       
        this.getAnnounCeMentTop()
        this.gameListBy()
    },
    watch:{
        isLog(newVal,oldVal){
            if(newVal){
                this.getOrderUserList()
            }
                
        }
    },
    methods: {
        namereg(){
            if(this.username==''||this.username==null||this.username==undefined){
                this.$Message.error('姓名不能为空！');
                return;       
            }
            if(this.usercard==''||this.usercard==null||this.usercard==undefined){
                this.$Message.error('身份证号不能为空！');
                return;       
            }
            this.$Message.success('实名注册成功！');
            this.isShowNamereg = false;
        },
        goLogin(){
            this.$emit("goLogin",true);
        },
        //跳转到陪玩主页
        goDetail(val){
            let routeData = this.$router.resolve({
                name:'detail',
                params:{
                    userId:val.seller.id
                },
                query:{
                    serviceId:val.goods[0].goodsType.serviceId
                }
            })
            window.open(routeData.href, '_blank')
        },
        // 服务列表
        gameListBy(){
            let arr = [];
            apiHttp.apiIndex.gameListBy('',resp=>{
                if(resp.code == 200){ 
                    for(var i=0;i<resp.data.length;i++){
						resp.data[i].isShowDescribe = false;
						arr.push(resp.data[i])
					}                   
                    this.gameListArr = arr;
                }
            })
        },
        //一起玩过的玩家列表
        getOrderUserList(){
            let arr = []
            let typeArr = []
            let params = {               
                businessType:"0",
                status:["10"],
                groupBy:["seller"] //过滤相同玩家的参数
            }
            apiHttp.orderIndex.indexOrderList(this.page,this.size,params,resp=>{                              
                if(resp.code==200){
                    this.totalPage = resp.data.totalPages;
                    this.totalElements = resp.data.totalElements;
                    for(var i=0;i<resp.data.content.length;i++){
                        typeArr.push(this.$getJson(resp.data.content[i].goods[0].goodsType));
                        resp.data.content[i].goods[0].goodsType = typeArr[i];
						resp.data.content[i].isSelect = false;  //是否被选中
						arr.push(resp.data.content[i])
					}
                    this.sellerList = arr;
                }               
            })
        },
        //一起玩过的玩家列表分页
        fenYe(type){
            if(type==0){
                if(this.page<this.totalPage){
                    this.page-=1;
                }else{
                    this.page = this.totalPage;
                }                
            }
            if(type==1){
                if(this.page>0){
                    this.page-=1;
                }else{
                    this.page = 0;
                } 
                this.page+=1;
            }
            this.getOrderUserList()
        },
        //首页查询最新的Top4公告标题
        getAnnounCeMentTop() {
            apiHttp.apiGg.getAnnounCeMentTop('',resp => {              
                if(resp.code==200){
                    this.AnnounCeMentTopData=resp.data;
                }
            });
        },
        // 跳转到约陪玩页面
        hotService(item){
            // this.isShowNamereg = true;
            /* 检查是否实名登录了 */
            let routeData = this.$router.resolve({
                name:'playAroundWith',
                query:{
                    id:item.id
                }
            })
            window.open(routeData.href, '_blank')
        },
        // 跳转到公告详情
        ggLink(item){
            let routeData = this.$router.resolve({
                name:'ggListDetail',
                query:{
                    id:item.id
                }
            })
            window.open(routeData.href, '_blank')
        }
    }
}
</script>
<style scoped>
.myClear{
    clear: both;
}
.played .top-img{
    padding-top: 20px;
    width: 80px;
    margin: 0 auto;
}
.login-y{
    text-align: center;
    height: 20px;
    line-height: 20px;
    font-size: 14px;
    margin-top: 5px;
}
.played .top-img img{
    width: 100%;
}
.played .bot-btn{
    width: 80%;
    margin: 20px auto;
    padding-left: 10%; 
}
.played .bot-btn p{
    float: left;
    width: 90px;
    height: 28px;
    background-color:#D84E4D;
    border-radius: 4px;
    font-size: 14px;
    color: #ffffff;
    text-align: center;
    line-height: 28px;
}
.played .bot-btn p:nth-child(1){
    margin-right:10%;
}

.Popular-services>ul>li{
    position: relative;
}
.gameDescribe{
    width: 90%;
    /* padding: 2px 5px; */
    padding-left: 3px;
    border-radius: 6px;
    float: left;
    background-color: #D84E4D;
    color: #ffffff;
    position: absolute;
    top: 10%;
    left: 5%;
}
.nameReg h3{
    text-align: center;
    margin-bottom: 20px;
}
.nameReg span{
    display: block;
    margin: 10px 0px;
}
.nameReg .span3{
    text-align: center;
    background-color: #D84E4D;
    color: #ffffff;
    border-radius: 10px;
    width: 80px;
    height: 25px;
    margin: 0 auto;
    line-height: 25px;
}
.ivu-modal{
    top: 40%;
}
</style>

